<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset="utf-8">
    
    <title>为 Hexo 添加可折叠的文章目录 | 夏红林</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="前言Hexo 支持自动给文章加上目录，但默认生成的目录比较简陋，好在我们可以手动改进一下它，比如增加 点击展开/收起多级目录 的功能。">
<meta property="og:type" content="article">
<meta property="og:title" content="为 Hexo 添加可折叠的文章目录">
<meta property="og:url" content="http://xiahl.top/2016/06/13/hexo-collapsible-toc/index.html">
<meta property="og:site_name" content="夏红林">
<meta property="og:description" content="前言Hexo 支持自动给文章加上目录，但默认生成的目录比较简陋，好在我们可以手动改进一下它，比如增加 点击展开/收起多级目录 的功能。">
<meta property="og:image" content="http://xiahl.top/resources/feat.toc.gif">
<meta property="og:updated_time" content="2016-06-27T12:27:26.729Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="为 Hexo 添加可折叠的文章目录">
<meta name="twitter:description" content="前言Hexo 支持自动给文章加上目录，但默认生成的目录比较简陋，好在我们可以手动改进一下它，比如增加 点击展开/收起多级目录 的功能。">
<meta name="twitter:image" content="http://xiahl.top/resources/feat.toc.gif">
    

    

    

    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/pace/1.0.2/themes/red/pace-theme-flash.css" rel="stylesheet">
    
    <link rel="stylesheet" href="/vendor/editor/css/editormd.min.css">
    <link rel="stylesheet" href="/css/tianxiamucun.css">
    <link rel="stylesheet" href="/css/style.css">
  
    <!-- jQuery -->
    <script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>

    <!-- jQuery UI -->
    <script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <!-- Bootstrap -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- Pace -->
    <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>

    <!-- niceScroll -->
    <script src="//cdn.bootcss.com/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="skin-blue sidebar-mini">
    <div id="container" class="wrapper">
        <header id="header" class="main-header">
    <!-- Logo -->
    <a href="/" class="logo">
        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini">xhl</span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg">夏红林</span>
    </a>
    <!-- Header Navbar -->
    <nav class="navbar navbar-static-top" role="navigation">
        <!-- Sidebar toggle button-->
        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
        </a>
        <!-- Navbar Right Menu -->
        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">

                <!-- User Account Menu -->
                <li class="dropdown user user-menu">
                    <!-- Menu Toggle Button -->
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <!-- The user image in the navbar-->
                        <img src="/img/user2-160x160.jpg" class="user-image" alt="User Image">
                        <!-- hidden-xs hides the username on small devices so only the image appears. -->
                        <span class="hidden-xs">Xiahl</span>
                    </a>
                    <ul class="dropdown-menu">
                        <!-- The user image in the menu -->
                        <li class="user-header">
                            <img src="/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                            <p>
                                Web Developer & Designer
                            </p>
                            <p>
                                Harbin, China
                            </p>
                        </li>
                        <!-- Menu Body -->
                        <li class="user-body">
                          <nav class="header-nav">
                            <ul class="social">
                                
                                    <a class="fa fa-email " 
                                    href="mailto:xiahl1990@gmail.com" 
                                    title="Email" 
                                    style="background-color: #90C9E2 !important"></a>
                                
                                    <a class="fa fa-github " 
                                    href="https://github.com/Xiahl1990" 
                                    title="GitHub" 
                                    style="background-color: #F5F5F5 !important"></a>
                                
                                    <a class="fa fa-rss " 
                                    href="/atom.xml" 
                                    title="RSS" 
                                    style="background-color: #EB965D !important"></a>
                                
                                    <a class="fa fa-weibo " 
                                    href="/" 
                                    title="WeiBo" 
                                    style="background-color: #E8CA86 !important"></a>
                                
                                    <a class="fa fa-weixin " 
                                    href="/" 
                                    title="WeiXin" 
                                    style="background-color: #27AE60 !important"></a>
                                
                            </ul>
                          </nav>                           
                        </li>
                        <!-- Menu Footer-->
                        <li class="user-footer">
                            <div class="row">
                                <div class="col-xs-12 text-center">
                                    <a href="https://github.com/Xiahl1990">Follow</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>

                <!-- Control Sidebar Toggle Button -->
                <li>
                    <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                </li>

            </ul>
        </div>
    </nav>
</header>
        <!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">

  <!-- sidebar -->
  <section class="sidebar">
    <!-- search form (Optional) -->
    <form class="sidebar-form">
      <div id="search-input-group" class="input-group">
          <input type="text" class="form-control" placeholder="搜索" />
          <span class="input-group-btn">
              <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
          </span>
      </div>
    </form>
       
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
        INPUTSELECTOR: '#search-input-group'
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

    <!-- /.search form -->

    <!-- Sidebar Menu -->
    <ul class="sidebar-menu">
      <li class="header">HEADER</li>
      <!-- Optionally, you can add icons to the links -->
      
        <li><a class="main-nav-link" href="/."><i class="fa fa-home"></i> <span>Home</span></a></li>
      
        <li><a class="main-nav-link" href="/archives"><i class="fa fa-folder"></i> <span>Archives</span></a></li>
      
        <li><a class="main-nav-link" href="/categories"><i class="fa fa-copy"></i> <span>Categories</span></a></li>
      
        <li><a class="main-nav-link" href="/tags"><i class="fa fa-tags"></i> <span>Tags</span></a></li>
      
        <li><a class="main-nav-link" href="/editor"><i class="fa fa-edit"></i> <span>Editor</span></a></li>
      
        <li><a class="main-nav-link" href="/about"><i class="fa fa-info-circle"></i> <span>About</span></a></li>
      
    </ul>
    <!-- /.sidebar-menu -->

  </section>
  <!-- /.sidebar -->

</aside>
        <!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Main content -->
    <section class="content">
    	<div class="container-fluid">
    		<div class="row">
        		<article id="post-hexo-collapsible-toc" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
        
            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            为 Hexo 添加可折叠的文章目录
        </h1>
    

                <div class="article-meta">
                    
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/2016/06/13/hexo-collapsible-toc/">
            <time datetime="2016-06-13T12:06:30.000Z" itemprop="datePublished">2016-06-13</time>
        </a>
    </div>


                    
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/categories/术业专攻/">术业专攻</a>
    </div>

                    
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/tags/Hexo/">Hexo</a>, <a class="tag-link" href="/tags/jQuery/">jQuery</a>
    </div>

                </div>
            </header>
        
        <div class="article-entry" itemprop="articleBody">
        
            
                <div id="toc" class="toc-article">
                <strong class="toc-title">文章目录</strong>
                    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#intro"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#前期准备"><span class="toc-number">2.</span> <span class="toc-text">前期准备</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#目录生成"><span class="toc-number">2.1.</span> <span class="toc-text">目录生成</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#观察结构"><span class="toc-number">2.2.</span> <span class="toc-text">观察结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#功能构思"><span class="toc-number">2.3.</span> <span class="toc-text">功能构思</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#代码编写"><span class="toc-number">3.</span> <span class="toc-text">代码编写</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#添加小图标"><span class="toc-number">3.1.</span> <span class="toc-text">添加小图标</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#点击小图标"><span class="toc-number">3.2.</span> <span class="toc-text">点击小图标</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#点击大标题"><span class="toc-number">3.3.</span> <span class="toc-text">点击大标题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#点击总标题"><span class="toc-number">3.4.</span> <span class="toc-text">点击总标题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS-样式"><span class="toc-number">3.5.</span> <span class="toc-text">CSS 样式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#相关链接"><span class="toc-number">4.</span> <span class="toc-text">相关链接</span></a></li></ol>
                </div>
            
            <p></p><h2 id="intro">前言</h2>Hexo 支持自动给文章加上目录，但默认生成的目录比较简陋，好在我们可以手动改进一下它，比如增加 点击展开/收起多级目录 的功能。<p></p>
<a id="more"></a>
<p><img style="display: block;" src="/resources/feat.toc.gif" title="TOC"></p>
<h2 id="前期准备"><a href="#前期准备" class="headerlink" title="前期准备"></a>前期准备</h2><h3 id="目录生成"><a href="#目录生成" class="headerlink" title="目录生成"></a>目录生成</h3><ul>
<li>比如 <a href="https://github.com/MOxFIVE/hexo-theme-yelee/" target="_blank" rel="external">Yelee</a> 主题中用以下代码自带生成目录，使用 Hexo 自带的辅助函数 <code>&lt;%-toc(post.content)%&gt;</code> 来生成文章目录，同时将目录包裹起来以便修改样式。其他主题大同小异。</li>
</ul>
<figure class="highlight erb"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"toc"</span> <span class="attr">class</span>=<span class="string">"toc-article"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">strong</span> <span class="attr">class</span>=<span class="string">"toc-title"</span>&gt;</span>文章目录<span class="tag">&lt;/<span class="name">strong</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">%-</span></span></span> toc(post.content) <span class="xml"><span class="tag">%&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h3 id="观察结构"><a href="#观察结构" class="headerlink" title="观察结构"></a>观察结构</h3><ul>
<li>审查元素，观察到生成后的目录 HTML 结构大致如下</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"toc"</span> <span class="attr">class</span>=<span class="string">"toc-article"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">strong</span> <span class="attr">class</span>=<span class="string">"toc-title"</span>&gt;</span>文章目录<span class="tag">&lt;/<span class="name">strong</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ol</span> <span class="attr">class</span>=<span class="string">"toc"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"toc-item toc-level-2"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"toc-link"</span> <span class="attr">href</span>=<span class="string">"#标题1"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"toc-number"</span>&gt;</span>1.<span class="tag">&lt;/<span class="name">span</span>&gt;</span> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"toc-text"</span>&gt;</span>标题1<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"toc-item toc-level-2"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"toc-link"</span> <span class="attr">href</span>=<span class="string">"#标题2"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"toc-number"</span>&gt;</span>2.<span class="tag">&lt;/<span class="name">span</span>&gt;</span> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"toc-text"</span>&gt;</span>标题2<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- 含子标题 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ol</span> <span class="attr">class</span>=<span class="string">"toc-child"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"toc-item toc-level-3"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"toc-link"</span> <span class="attr">href</span>=<span class="string">"#子标题1"</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"toc-number"</span>&gt;</span>2.1.<span class="tag">&lt;/<span class="name">span</span>&gt;</span> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"toc-text"</span>&gt;</span>子标题1<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"toc-item toc-level-3"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"toc-link"</span> <span class="attr">href</span>=<span class="string">"#子标题2"</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"toc-number"</span>&gt;</span>2.2.<span class="tag">&lt;/<span class="name">span</span>&gt;</span> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"toc-text"</span>&gt;</span>子标题2<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="功能构思"><a href="#功能构思" class="headerlink" title="功能构思"></a>功能构思</h3><ul>
<li>在每个包含子标题的大标题前插入小图标；</li>
<li>找出需要绑定点击事件的元素；</li>
<li>理清每次事件中子目录折叠和小图标切换的逻辑。</li>
</ul>
<h2 id="代码编写"><a href="#代码编写" class="headerlink" title="代码编写"></a>代码编写</h2><h3 id="添加小图标"><a href="#添加小图标" class="headerlink" title="添加小图标"></a>添加小图标</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> $itemHasChild = $(<span class="string">"#toc .toc-item:has(&gt; .toc-child)"</span>);</span><br><span class="line"><span class="keyword">var</span> $titleHasChild = $itemHasChild.children(<span class="string">".toc-link"</span>);</span><br><span class="line">$itemHasChild.prepend(<span class="string">"&lt;i class='fa fa-caret-down'&gt;&lt;/i&gt;&lt;i class='fa fa-caret-right'&gt;&lt;/i&gt;"</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> $iconToFold = $(<span class="string">".toc-item &gt; .fa-caret-down"</span>);</span><br><span class="line">$iconToExpand.addClass(<span class="string">"hide"</span>);</span><br></pre></td></tr></table></figure>
<blockquote>
<p>这里在匹配的大标题前插入了两个 <code>&lt;i&gt;</code> 标签，用于表示目录 <code>展开</code> 和 <code>收起</code> 这两种状态；<br>标签使用了 <a href="http://fontawesome.io/" target="_blank" rel="external">Font Awesome</a> 中的小三角形图标，可自行更换或者用 CSS 绘制；</p>
</blockquote>
<h3 id="点击小图标"><a href="#点击小图标" class="headerlink" title="点击小图标"></a>点击小图标</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> clickIcon = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"#toc .toc-item &gt; i"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        $(<span class="keyword">this</span>).siblings(<span class="string">".toc-child"</span>).slideToggle(<span class="number">100</span>);</span><br><span class="line">        $(<span class="keyword">this</span>).toggleClass(<span class="string">"hide"</span>);</span><br><span class="line">        $(<span class="keyword">this</span>).siblings(<span class="string">"i"</span>).toggleClass(<span class="string">"hide"</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 默认展开目录，所以隐藏掉表示“目录已展开”的图标（向下的小三角）</span></span><br><span class="line"><span class="keyword">var</span> $iconToFold = $(<span class="string">".toc-item &gt; .fa-caret-down"</span>);</span><br><span class="line">$iconToExpand.addClass(<span class="string">"hide"</span>);</span><br></pre></td></tr></table></figure>
<blockquote>
<ul>
<li>点击小图标折叠次级目录，同时切换到相应图标；</li>
<li>这里图标的显示状态是在 <code>inline-block</code> 和 <code>none</code> 中切换，用 <code>toggleClass</code> 比较合适。</li>
</ul>
</blockquote>
<h3 id="点击大标题"><a href="#点击大标题" class="headerlink" title="点击大标题"></a>点击大标题</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> clickTitle = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $titleHasChild.dblclick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        $(<span class="keyword">this</span>).siblings(<span class="string">".toc-child"</span>).hide(<span class="number">100</span>);</span><br><span class="line">        $(<span class="keyword">this</span>).siblings(<span class="string">"i"</span>).toggleClass(<span class="string">"hide"</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="comment">// After dblclick enent</span></span><br><span class="line">    $titleHasChild.click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> $curentTocChild = $(<span class="keyword">this</span>).siblings(<span class="string">".toc-child"</span>);</span><br><span class="line">        <span class="keyword">if</span> ($curentTocChild.is(<span class="string">":hidden"</span>)) &#123;</span><br><span class="line">            $curentTocChild.show(<span class="number">100</span>);</span><br><span class="line">            $(<span class="keyword">this</span>).siblings(<span class="string">"i"</span>).toggleClass(<span class="string">"hide"</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;()</span><br></pre></td></tr></table></figure>
<blockquote>
<ul>
<li>这里按我自己的习惯设计成 <code>单击</code> 即展开目录，而折叠目录需要 <code>双击</code>。因为点击某个目录时，代表我希望了解该目录的内容，所以不希望单击就把对应目录给收起了；</li>
<li>单击事件要在双击事件之后，要不点击事件会出现异常。</li>
</ul>
</blockquote>
<h3 id="点击总标题"><a href="#点击总标题" class="headerlink" title="点击总标题"></a>点击总标题</h3><ul>
<li>之前给目录区加了个总标题 <code>文章目录</code>，现在可以给赋予其函数，以便点击时 展开/收起 所有目录</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> clickTocTitle = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> $iconToExpand = $(<span class="string">".toc-item &gt; .fa-caret-right"</span>);</span><br><span class="line">    <span class="keyword">var</span> $iconToFold = $(<span class="string">".toc-item &gt; .fa-caret-down"</span>);</span><br><span class="line">    <span class="keyword">var</span> $subToc = $titleHasChild.next(<span class="string">".toc-child"</span>);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> $tocTitle = $(<span class="string">"#toc .toc-title"</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 当包含多级目录时再执行</span></span><br><span class="line">    <span class="keyword">if</span> ($titleHasChild.length) &#123;</span><br><span class="line">        $tocTitle.addClass(<span class="string">"clickable"</span>);</span><br><span class="line">        $tocTitle.click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">if</span> ($subToc.is(<span class="string">":hidden"</span>)) &#123;</span><br><span class="line">                $subToc.show(<span class="number">150</span>);</span><br><span class="line">                $iconToExpand.removeClass(<span class="string">"hide"</span>);</span><br><span class="line">                $iconToFold.addClass(<span class="string">"hide"</span>);</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                $subToc.hide(<span class="number">100</span>);</span><br><span class="line">                $iconToExpand.addClass(<span class="string">"hide"</span>);</span><br><span class="line">                $iconToFold.removeClass(<span class="string">"hide"</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;()</span><br></pre></td></tr></table></figure>
<h3 id="CSS-样式"><a href="#CSS-样式" class="headerlink" title="CSS 样式"></a>CSS 样式</h3><ul>
<li>功能函数设置好后，再通过 CSS 调整下样式即可，样式根据主题风格和个人喜好自行调整；</li>
<li>下面是部分自用样式，可参考</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*小图标*/</span></span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-tag">ol</span><span class="selector-class">.toc</span> <span class="selector-tag">li</span><span class="selector-class">.toc-item</span> <span class="selector-tag">i</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">margin-left</span>: -<span class="number">0.9em</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">0.9em</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#b3b3b3</span>;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">    <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-tag">ol</span><span class="selector-class">.toc</span> <span class="selector-tag">li</span><span class="selector-class">.toc-item</span> <span class="selector-tag">i</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*关联图标的 Class*/</span></span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-tag">ol</span><span class="selector-class">.toc</span> <span class="selector-tag">li</span><span class="selector-class">.toc-item</span> <span class="selector-tag">i</span><span class="selector-class">.hide</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*关联总标题的 Class*/</span></span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-class">.toc-title</span><span class="selector-class">.clickable</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-class">.toc-title</span><span class="selector-class">.clickable</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#88acdb</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-class">.toc-title</span><span class="selector-class">.clickable</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#d3d3d3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*其他目录相关*/</span></span><br><span class="line"><span class="selector-id">#toc</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">0.9em</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.65em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-class">.toc-title</span> &#123;</span><br><span class="line">    <span class="attribute">font-weight</span>: bold;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#808080</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-tag">ol</span><span class="selector-class">.toc</span> &#123;</span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0.7em</span>;</span><br><span class="line">    <span class="attribute">padding-right</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-tag">ol</span><span class="selector-class">.toc</span> <span class="selector-tag">li</span><span class="selector-class">.toc-item</span> &#123;</span><br><span class="line">    <span class="attribute">list-style-type</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-tag">ol</span><span class="selector-class">.toc</span> <span class="selector-tag">li</span><span class="selector-class">.toc-item</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-tag">ol</span><span class="selector-class">.toc</span> <span class="selector-tag">a</span><span class="selector-class">.toc-link</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#808080</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-tag">ol</span><span class="selector-class">.toc</span> <span class="selector-tag">a</span><span class="selector-class">.toc-link</span><span class="selector-pseudo">:visited</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#f48385</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-tag">ol</span><span class="selector-class">.toc</span> <span class="selector-tag">a</span><span class="selector-class">.toc-link</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#88acdb</span>;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">rgba</span>(158,188,226,0.21);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#toc</span> <span class="selector-tag">ol</span><span class="selector-class">.toc</span> <span class="selector-tag">ol</span><span class="selector-class">.toc-child</span> &#123;</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">1.25em</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">4px</span> <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="相关链接"><a href="#相关链接" class="headerlink" title="相关链接"></a>相关链接</h2><ol>
<li><strong>Font Awesome</strong>: <a href="http://fontawesome.io/" target="_blank" rel="external">http://fontawesome.io/</a></li>
<li><strong>Hexo TOC 辅助函数:</strong> <a href="https://hexo.io/zh-cn/docs/helpers.html#toc" target="_blank" rel="external">https://hexo.io/zh-cn/docs/helpers.html#toc</a></li>
<li><strong><em>为 Hexo 博客添加目录</em></strong> by <strong>况琪</strong> on <code>2015/02/09</code>: <a href="http://kuangqi.me/tricks/enable-table-of-contents-on-hexo/" target="_blank" rel="external">http://kuangqi.me/tricks/enable-table-of-contents-on-hexo/</a></li>
<li><strong><em>feat: collapsible TOC 可折叠目录</em></strong> by <strong>MOxFIVE</strong> on <code>2016/06/05</code>: <a href="https://github.com/MOxFIVE/hexo-theme-yelee/commit/85764bbf482c78d819f8ca87bf9fe390d523dd3b" target="_blank" rel="external">https://github.com/MOxFIVE/hexo-theme-yelee/commit/85764bbf482c78d819f8ca87bf9fe390d523dd3b</a></li>
</ol>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



</div>

    <a data-url="http://xiahl.top/2016/06/13/hexo-collapsible-toc/" data-id="ciq3y0h3p000q9ovqdossr91u" class="article-share-link"><i class="fa fa-share"></i>分享到</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
    
        <a href="http://xiahl.top/2016/06/13/hexo-collapsible-toc/#comments" class="article-comment-link disqus-comment-count" data-disqus-url="http://xiahl.top/2016/06/13/hexo-collapsible-toc/">评论</a>
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
    
        <a href="/2016/05/31/hexo-local-search/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">下一篇</strong>
            <div class="article-nav-title">让 Hexo 博客支持本地站内搜索</div>
        </a>
    
</nav>


    
</article>


    
    
        <section id="comments">
    <style> aside.comment-bar { margin: auto 30px; }</style>
    <div id="disqus_thread"></div>
    <script>
        var disqus_config = function(){
            this.page.url = 'http://xiahl.top/2016/06/13/hexo-collapsible-toc/';
            this.page.identifier = '2016/06/13/hexo-collapsible-toc/';
        };
        var loadComment = function(){
            var d = document, s = d.createElement('script');
            s.src = '//xiahl.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        }
    </script>
    
    <aside class="comment-bar">
        <a href="javascript:void(0);">
            <i class="fa fa-commenting-o animated infinite pulse"></i>
            <i class="fa fa-spinner fa-pulse"></i>
            <span class="count-comment"></span>
        </a>
    </aside>
    <script>
        var $commentBar = $("#comments aside.comment-bar");
        var load$hide = function(){
            $commentBar.find("a > i").toggle();
            loadComment();
            $commentBar.fadeOut(800);
        }
        $commentBar.click(function(){
            load$hide();
        })
        $commentBar.children("a").hover(function(){
            load$hide();
        })
        if (window.location.hash === "#comments") {
            load$hide();
        }
    </script>

</section>


    <script id="dsq-count-scr" src="//xiahl.disqus.com/count.js" async></script>
    <span class="disqus-comment-count" data-disqus-identifier="2016/06/13/hexo-collapsible-toc/"></span>
    <span class="disqus-comment-count" data-disqus-url="http://xiahl.top/2016/06/13/hexo-collapsible-toc/"></span>
    <script>
        $(".disqus-comment-count").hide();
        var $disqusCount = $(".disqus-comment-count");
        $disqusCount.bind("DOMNodeInserted", function(e) {
            $(".count-comment").text(
                $(this).text().replace(/[^0-9]/ig,"")
            )
            DISQUSWIDGETS.getCount({reset: true});
        })
    </script>

    





    <section class="scroll" id="article-nav-button">
    
        <a href="/" title="回到主页"><i class="fa fa-home"></i></a>
    

    <a href="/archives" title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times hide"></i></a>

    
        <a href="/2016/05/31/hexo-local-search/" title="下一篇">
            <i class="fa fa-angle-right"></i>
        </a>
    
</section>

    <section class="scroll" id="article-scroll-button">
    <a href="#" title="返回顶部"><i class="fa fa-arrow-up"></i></a>
    <a href="#comments" onclick="if (true) load$hide(); return false;" title="查看评论" class="to-comment" style="display: none;"><i class="fa fa-comments-o"></i></a>
    <a href="#footer" title="转到底部"><i class="fa fa-arrow-down"></i></a>
</section>



        	</div>
        </div>
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

        <footer class="main-footer" id="footer">
	<!-- To the right -->
	<div class="pull-right hidden-xs">
	  Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme by <a href="https://github.com/Xiahl1990">tianxiamucun</a>
	</div>
	<!-- Default to the left -->
	&copy; 2016 夏红林<br>
</footer>
        <!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
  <!-- Create the tabs -->
  <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
    <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i> Info</a></li>
    <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i> Setting</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">

    <!-- Home tab content -->
    <div class="tab-pane active" id="control-sidebar-home-tab">
      <p>No</p>
    </div>
    <!-- /.tab-pane -->

    <!-- Settings tab content -->
    <div class="tab-pane" id="control-sidebar-settings-tab">
      <h4 class='control-sidebar-heading'>Theme</h4>
<ul class="list-unstyled clearfix" id="theme-list">
    <li>
		<a href="/icarus" title="Icarus">
          <i class="fa fa-flag-o"></i>
	    </a>
    </li>
</ul>
      <h4 class='control-sidebar-heading'>Skins</h4>
<ul class="list-unstyled clearfix" id="skins-list">
    <li style="float:left; width: 33.33333%; padding: 5px;">
        <a href="javascript:void(0);" data-skin="skin-blue" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
            <div><span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
            <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
        </a>
        <p class="text-center no-margin" data-skin="skin-blue">Blue</p>
    </li>
    <li style="float:left; width: 33.33333%; padding: 5px;">
        <a href="javascript:void(0);" data-skin="skin-black" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
            <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span></div>
            <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
        </a>
        <p class="text-center no-margin" data-skin="skin-black">Black</p>
    </li>
    <li style="float:left; width: 33.33333%; padding: 5px;">
        <a href="javascript:void(0);" data-skin="skin-purple" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
            <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
            <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
        </a>
        <p class="text-center no-margin" data-skin="skin-purple">Purple</p>
    </li>
    <li style="float:left; width: 33.33333%; padding: 5px;">
        <a href="javascript:void(0);" data-skin="skin-green" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
            <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
            <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
        </a>
        <p class="text-center no-margin" data-skin="skin-green">Green</p>
    </li>
    <li style="float:left; width: 33.33333%; padding: 5px;">
        <a href="javascript:void(0);" data-skin="skin-red" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
            <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
            <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
        </a>
        <p class="text-center no-margin" data-skin="skin-red">Red</p>
    </li>
    <li style="float:left; width: 33.33333%; padding: 5px;">
        <a href="javascript:void(0);" data-skin="skin-yellow" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
            <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
            <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
        </a>
        <p class="text-center no-margin" data-skin="skin-yellow">Yellow</p>
    </li>
    <li style="float:left; width: 33.33333%; padding: 5px;">
        <a href="javascript:void(0);" data-skin="skin-blue-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
            <div><span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
            <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
        </a>
        <p class="text-center no-margin" data-skin="skin-blue-light" style="font-size: 12px">Blue Light</p>
    </li>
    <li style="float:left; width: 33.33333%; padding: 5px;">
        <a href="javascript:void(0);" data-skin="skin-black-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
            <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span></div>
            <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
        </a>
        <p class="text-center no-margin" data-skin="skin-black-light" style="font-size: 12px">Black Light</p>
    </li>
    <li style="float:left; width: 33.33333%; padding: 5px;">
        <a href="javascript:void(0);" data-skin="skin-purple-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
            <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
            <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
        </a>
        <p class="text-center no-margin" data-skin="skin-purple-light" style="font-size: 12px">Purple Light</p>
    </li>
    <li style="float:left; width: 33.33333%; padding: 5px;">
        <a href="javascript:void(0);" data-skin="skin-green-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
            <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
            <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
        </a>
        <p class="text-center no-margin" data-skin="skin-green-light" style="font-size: 12px">Green Light</p>
    </li>
    <li style="float:left; width: 33.33333%; padding: 5px;">
        <a href="javascript:void(0);" data-skin="skin-red-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
            <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
            <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
        </a>
        <p class="text-center no-margin" data-skin="skin-red-light" style="font-size: 12px">Red Light</p>
    </li>
    <li style="float:left; width: 33.33333%; padding: 5px;">
        <a href="javascript:void(0);" data-skin="skin-yellow-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
            <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
            <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
        </a>
        <p class="text-center no-margin" data-skin="skin-yellow-light" style="font-size: 12px;">Yellow Light</p>
    </li>
</ul>
    </div>
    <!-- /.tab-pane -->

  </div>

</aside>
<!-- /.control-sidebar -->

<div class="control-sidebar-bg"></div>
    </div>
    <!-- editormd -->
<script src="/vendor/editor/editormd.js"></script>

<!-- analytics -->

    
        <script src="/vendor/fancybox/jquery.fancybox.pack.js"></script>
    


<!-- Custom Scripts -->
<script src="/js/app.js"></script>

<!-- Init Scripts -->
<script>
  $(function(){

      $("html").niceScroll();

      //jQuery UI sortable for the todo list
      $(".todo-list").sortable({
        placeholder: "sort-highlight",
        handle: ".handle",
        forcePlaceholderSize: true,
        zIndex: 999999
      });
  });
</script>

</body>
</html>
